<template>
  <div id="viewTrackMap-map" style="width:100%;height:754px;"></div>
  <!--地图导出测试方法1-->
  <!--<a id="image-download" download="map.png"></a>-->
  <!--地图导出测试方法2-->
  <!--<a id="export-png" class="btn" download="map.png"><i class="icon-download">地图导出(暂支持非IE内核浏览器)</i></a>
  <a id="manypng" class="btn" download="map.png"><i class="icon-download" > Download many</i></a>-->
  <!-- width可以为100%，但是height必须是一个确定的值 -->
  <div id="viewTrackMap-mapDiv" class="ol-popup">
    <!-- 显示控件 -->
    <div id="viewTrackMap-setDivPosition"  class="init-setDivPosition">
      <!-- 切换卫星和街道地图 -->
      <p @click="switchMap" class="init-setDivPosition-selected">
        <template v-if="switchMapBool==false">
          <img src="@/assets/map/image/weixing-b.png" title="切换卫星地图"><br/><span>卫星图</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/jiedao-b.png" title="切换街道地图"><br/><span>街道图</span>
        </template>
      </p>
      <!-- 返回主界面 -->
      <p @click="zoomDefaultPosition" :class="{ 'init-setDivPosition-selected': zoomDefaultPositionBool==true }">
        <img src="@/assets/map/image/newImage/home.png" title="返回主界面"><br/><span>主界面</span>
      </p>
      <!-- 显示工具箱 -->
      <p @click="showHideToolsBoxDiv" :class="{ 'init-setDivPosition-selected': showHideToolsBox==false }">
        <template v-if="showHideToolsBox">
          <img src="@/assets/map/image/tools.png" title="打开工具箱"><br/><span style="border:0;">工具箱</span>
        </template>
        <template v-else>
          <img src="@/assets/map/image/tools.png" title="关闭工具箱"><br/><span style="border:0;">工具箱</span>
        </template>
      </p>
    </div>
    <!-- 任务接口 -->
    <div id="viewTrackMap-taskDiv" class="init-TaskDiv">
      <p id="viewTrackMap-dtqxTask" @click="mapDrawTaskPolygon"><span>地图圈选工作区域</span></p>
      <p id="viewTrackMap-xzqhTask" @click="xzqhSelectTaskPolygon"><span style="border:0;">行政区划选择工作区域</span></p>
    </div>
    <!-- 工具箱 -->
    <div id="viewTrackMap-ToolsBoxDiv" class="init-ToolsBoxDiv">
      <p @click="measureToolBox" :class="{ 'init-setDivPosition-selected': showHideMeasureTool==false }">
        <template v-if="showHideMeasureTool">
          <img title="开启测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
        </template>
        <template v-else>
          <img title="关闭测量工具" src="@/assets/map/image/cel.png"><br/><span>测量</span>
        </template>
      </p>
      <p @click="positionToolBox" :class="{ 'init-setDivPosition-selected': showHidePositionTool==false }">
        <template v-if="showHidePositionTool">
          <img title="开启定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
        <template v-else>
          <img title="关闭定位工具" src="@/assets/map/image/dingw.png"><br/><span style="border:0;">定位</span>
        </template>
      </p>
    </div>
    <!-- 所有工具 -->
    <div id="viewTrackMap-AllToolsDiv" class="init-AllToolsDiv">
      <!-- 测量工具 -->
      <div id="viewTrackMap-MeasureToolsDiv" class="init-AllToolsDivFloat">
        <p @click="measureDistance" :class="{ 'init-setDivPosition-selected': measureDistanceBool==false }">
          <template v-if="measureDistanceBool">
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jul.png" title="测量距离（在地图上单击鼠标左键绘制折线，双击完成测量）"><br/><span>测量距离</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="measureArea" :class="{ 'init-setDivPosition-selected': measureAreaBool==false }">
          <template v-if="measureAreaBool">
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/mianj.png" title="测量面积（在地图上单击鼠标左键绘制多边形，双击完成测量）"><br/><span>测量面积</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="stopMeasure" :class="{ 'init-setDivPosition-selected': stopMeasureBool==false }">
          <template v-if="stopMeasureBool">
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/jshz.png" title="取消测量距离或测量面积操作"><br/><span>结束测量</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="clearMeasure" :class="{ 'init-setDivPosition-selected': clearMeasureBool==false }">
          <template v-if="clearMeasureBool">
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部测量结果"><br/><span>清空结果</span>
          </template>
        </p>
      </div>
      <!-- 定位工具 -->
      <div id="viewTrackMap-MousePositionDiv">
        <span><img class="init-jingd" src="@/assets/map/image/jingd.png" title="鼠标左键在地图上点击位置的经度值"></span>
        <input id="viewTrackMap-MousePositionLon" type="text" value="">
        <span><img class="init-weid" src="@/assets/map/image/weid.png" title="鼠标左键在地图上点击位置的纬度值"></span>
        <input id="viewTrackMap-MousePositionLat" type="text" value="">
        <p @click="clearPosition" :class="{ 'init-setDivPosition-selected': clearPositionBool==false }">
          <template v-if="clearPositionBool">
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/qux.png" title="清空全部定位点图标"><br/><span>清空结果</span>
          </template>
        </p>
        <p class="init-AllToolsDiv-split"></p>
        <p @click="addPosition" :class="{ 'init-setDivPosition-selected': addPositionBool==false }">
          <template v-if="addPositionBool">
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
          <template v-else>
            <img src="@/assets/map/image/dingwd.png" title="根据经纬度值在地图上添加定位点图标"><br/><span>添加定位点</span>
          </template>
        </p>
      </div>
    </div>
    <!-- 弹出窗口 -->
    <!--<div id="viewTrackMap-popup" class="new-ol-popup">
      <a href="#" id="viewTrackMap-popup-closer" class="new-ol-popup-closer"></a>
      <div id="viewTrackMap-popup-content"></div>
    </div>-->
    <!--回放控件-->
    <div id="viewTrackMap-tracePlayControlDiv" class="new-tracePlayControlDiv">
      <div class="new-menu">
        <div id="viewTrackMap-tracePlayControlButton" @click="playControl" class="new-play">开始</div>
        <div id="viewTrackMap-time" class="new-time">当前回放时间</div>
        <!-- 进度条 -->
        <div @click="progressClick" id="viewTrackMap-progress" class="new-progress_bar">
          <!-- 已播放的进度 -->
          <div></div>
          <!-- 播放的标记点 -->
          <i></i>
        </div>
        <!-- 倍速 -->
        <div class="new-speed">
          <select id="viewTrackMap-selectSpeed">
            <option value="1" selected>1倍</option>
            <option value="5">5倍</option>
            <option value="10">10倍</option>
            <option value="20">20倍</option>
          </select>
        </div>
        <!-- 回放类型 -->
        <div class="new-speedType">
          <select id="viewTrackMap-selectSpeedType">
            <option value="0" selected>轨迹点</option>
            <option value="1">秒</option>
            <option value="2">分钟</option>
            <option value="3">小时</option>
            <option value="4">天</option>
          </select>
        </div>
        <!-- 重置 -->
        <div @click="clearPlay" class="new-clearPlay">重置</div>
        <!-- 全部轨迹 -->
        <div @click="showAllTrace" class="new-showAllTrace">全部</div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/map/ol/ol.css';
import { getProjection,getResolutions,getTiandituVecMap,getTiandituVecText,getTiandituImgMap,getTiandituImgText,
  getRESTLayer,getVectorTileLayer,iServerHttp } from "@/map/projMap.js";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import {Vector as VectorSource, XYZ} from 'ol/source'
import {Control, defaults as defaultControls} from 'ol/control';
import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Polygon from 'ol/geom/Polygon';
import LineString from 'ol/geom/LineString';
import {Fill, Stroke, Style, Icon, Circle,Text} from 'ol/style';
import {Select, Draw, Modify, Snap, Translate} from 'ol/interaction';
import {getArea, getLength} from 'ol/sphere';
import {unByKey} from 'ol/Observable';
import * as olExtent from 'ol/extent';
import {createBox} from 'ol/interaction/Draw';
import {boundingExtent} from 'ol/extent';
import { TileSuperMapRest,Logo,QueryByGeometryParameters,QueryService } from '@supermap/iclient-ol';
import dingweiImg from '@/assets/map/image/newImage/blueMarker.png';
import startImg from '@/assets/map/image/start.png';
import endImg from '@/assets/map/image/end.png';

export default {
  name: "ViewTrackMap",
  components: {

  },
  props: {
    allListData: {//任务列表
      type: Array,
      required: true,
      default: []
    }
  },
  emits:["mapLoading"],
  data() {
    return {
      str: "viewTrackMap",
      map: null,
      projection4490:null,
      center: [105, 34],
      zoom: 4,
      mapLoadingBool:false,//是否正在查询参数
      zoomDefaultPositionBool:true,//显示主界面
      switchMapBool:false,//切换地图
      layer1:null,//天地图街道图
      layer2:null,
      layer3:null,//天地图卫星图
      layer4:null,
      draw:null,//矢量绘制
      snap:null,
      select:null,
      modify:null,
      drag:null,
      source:null,//矢量绘制图层数据
      measureSource:null,//测量结果图层数据
      measure:null,//测量工具
      sketch:null,
      helpTooltipElement:null,
      helpTooltip:null,
      measureTooltipElement:null,
      measureTooltip:null,
      measureTooltipArray:[],//全部测量结果Overlay数组
      showHideMeasureTool:true,//显示|隐藏测量工具
      measureDistanceBool:true,
      measureAreaBool:true,
      stopMeasureBool:true,
      clearMeasureBool:true,
      showHidePositionTool:true,//显示|隐藏定位工具
      addPositionBool:true,
      clearPositionBool:true,
      popupInfoLayer:null,//弹出窗口
      showHideToolsBox:true,
      traceDataList:[],//轨迹列表数据
      //轨迹回放
      timer:null,//连续定时器
      speed:1,//回放速率
      speedType:0,//回放类型
      isRun:true,//播放与暂停标识
      animationLineLayer:null,//轨迹线图层
      animationPointLayer:null,//轨迹点图层
      strokestyle:null,//轨迹样式
      Iconstyle:null,//轨迹图标样式
      pointArray:[],//轨迹点集（带插值）
      tracePointArray:[],//轨迹点集（不带插值）
      currentIndex:null,//当前回放数据序号
      replayIndex:null,//（带插值）轨迹回放序号
      replayCount:null,//（带插值）轨迹回放分割线段数量
      allTimeArray:[],//全部时间数组
      startTime:null,//开始时间
      endTime:null,//结束时间
      totalSeconds:null,//回放总时长(单位：秒)
      currentSeconds:null,//当前回放时长(单位：秒)
      currentTime:null,//当前回放时间
      tempAnimationLineLayer:null,//临时轨迹线图层
      tempAnimationPointLayer:null//临时轨迹点图层
    }
  },
  watch: {
    allListData: {//轨迹列表数据
      handler: function (newVal, oldVal) {
        this.traceDataList = newVal;
        this.showTraceData();
      },
      immediate: true
    }
  },
  created() {

  },
  mounted() {
    console.log("mounted");
    let that = this;
    //地图异步加载
    this.$nextTick(function(){
      console.log('地图异步加载');
      //地图异步加载
      setTimeout(() => {
        //初始化地图信息
        that.initMap();
      }, 200);
    });
  },
  beforeCreate() {//生命周期创建之前
    console.log("beforeCreate");
  },
  beforeMount() {//生命周期挂载之前
    console.log("beforeMount");
  },
  beforeUpdate() {//生命周期更新之前
    console.log("beforeUpdate");
  },
  updated() {//生命周期更新之后
    console.log("updated");
  },
  beforeDestroy() {//生命周期销毁之前
    console.log("beforeDestroy");
  },
  destroyed() {//生命周期销毁完成
    this.map = null;
    console.log("销毁地图");
  },
  activated() {//如果页面有keep-alive缓存功能激活，这个函数会触发
    console.log("activated-"+this.str);
    //自动获取地图div高度
    this.autodivheight();
    //浏览器窗口发生变化时同时变化DIV高度
    window.onresize=this.autodivheight;
  },
  deactivated() {//如果页面有keep-alive缓存功能停用，这个函数会触发
    console.log("deactivated-"+this.str);
    //取消浏览器窗口发生变化时同时变化DIV高度事件
    window.onresize = null;
  },
  methods: {
    initMap() {
      debugger;
      let that = this;
      let mapStr = this.str;
      let targetMap = document.getElementById(mapStr+"-map");
      if(targetMap.innerHTML!=""){
        console.log("清空targetMap");
      }
      targetMap.innerHTML = "";//清空
      //新建popup弹窗
      let targetDiv = document.getElementById(mapStr+"-mapDiv");
      let node = document.createElement("div");
      node.id = mapStr+"-popup";
      node.setAttribute("class","new-ol-popup");
      node.innerHTML = '<a href="#" id="'+mapStr+'-popup-closer" class="new-ol-popup-closer"></a>' +
          '<div id="'+mapStr+'-popup-content"></div>';
      targetDiv.appendChild(node);
      console.log("新建popup");
      //自动获取地图div高度
      this.autodivheight();
      //浏览器窗口发生变化时同时变化DIV高度
      window.onresize=this.autodivheight;
      this.mapLoadingBool = true;
      //正在查询
      //this.mapLoading("正在查询，请稍候...");
      if(this.map){//避免重复加载地图
        console.log("避免重复加载地图");
        return;
      }
      console.log("初始化地图");
      //获取投影4490坐标系
      this.projection4490 = getProjection();
      //初始化地图信息
      this.map = new Map({
        target: targetMap.id,
        view: new View({
          center: this.center,
          maxZoom: 18,
          minZoom: 4,
          zoom: this.zoom,
          constrainResolution:true,//缩放地图可移动到最近的缩放级别（整数zoom级别）
          projection: 'EPSG:4490',
          // resolutions:getResolutions()
        })
      });
      //添加天地图图层
      this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
      this.map.addLayer(this.layer1);
      this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
      this.map.addLayer(this.layer2);
      this.layer1.setZIndex(0);
      this.layer2.setZIndex(0);
      //矢量绘制图层
      this.source = new VectorSource({
        wrapX: false
      });
      let vectorLayer = new VectorLayer({
        source: that.source,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(vectorLayer);
      vectorLayer.setZIndex(1);
      //测量结果图层
      this.measureSource = new VectorSource({
        wrapX: false
      });
      let measureLayer = new VectorLayer({
        source: that.measureSource,
        projection: 'EPSG:4490'
      });
      this.map.addLayer(measureLayer);
      measureLayer.setZIndex(1);
      //轨迹线图层
      this.animationLineLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.animationLineLayer);
      this.animationLineLayer.setZIndex(2);
      //临时轨迹线图层
      this.tempAnimationLineLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.tempAnimationLineLayer);
      this.tempAnimationLineLayer.setZIndex(2);
      //轨迹点图层
      this.animationPointLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.animationPointLayer);
      this.animationPointLayer.setZIndex(3);
      //临时轨迹点图层
      this.tempAnimationPointLayer = new VectorLayer({
        source: new VectorSource({
          wrapX: false
        }),
        projection: 'EPSG:4490'
      });
      this.map.addLayer(this.tempAnimationPointLayer);
      this.tempAnimationPointLayer.setZIndex(3);
      //添加控件
      let info = new Control({element: document.getElementById(mapStr+'-mapDiv')});
      info.setMap(this.map);
      this.map.addControl(info);
      //弹出窗口
      let popupTarget = document.getElementById(this.str+"-popup");
      if(popupTarget){
        this.popupInfoLayer = new Overlay({
          element: popupTarget,
          positioning: 'center-center'
        });
        this.map.addOverlay(this.popupInfoLayer);
        //显示弹出窗口
        document.getElementById(this.str+"-popup").style.display="block";
        //关闭弹出事件
        document.getElementById(this.str+"-popup-closer").onclick = function () {
          that.popupInfoLayer.setPosition(undefined);
          //隐藏弹出窗口
          document.getElementById(that.str+"-popup").style.display="none";
        };
      }
      //右键菜单事件
      this.map.on('contextmenu', function (event) {
        event.preventDefault();//屏蔽自带的右键事件

      });
      //点击地图事件
      this.map.on('click', function (event) {
        //隐藏弹出窗口
        if(that.popupInfoLayer!=null){
          that.popupInfoLayer.setPosition(undefined);
        }
        let pixel = that.map.getEventPixel(event.originalEvent);
        let coordinate = that.map.getEventCoordinate(event.originalEvent);
        //判断定位工具是否开启状态
        if(that.showHidePositionTool==false){
          document.getElementById(mapStr+"-MousePositionLon").value = coordinate[0];
          document.getElementById(mapStr+"-MousePositionLat").value = coordinate[1];
        }
        let feature = that.map.forEachFeatureAtPixel(pixel,function(feature){
          //根据像素坐标获取右键选中的地图要素
          return feature;
        });
        if(feature && that.draw==null){
          let temp = feature.getProperties();
          if(temp.createTime!=undefined && temp.createTime!=null){
            //设置弹窗内容
            that.setPopupContent(temp);
            if(that.popupInfoLayer!=null){
              that.popupInfoLayer.setPosition(coordinate);
            }
          }
        }
      });
      //地图移动事件
      this.map.on('moveend', function (event) {
        let center = that.map.getView().getCenter();
        let zoom = that.map.getView().getZoom();
        if(center[0]!=that.center[0] || center[1]!=that.center[1] || zoom!=that.zoom){
          //设置主界面图标文字
          that.zoomDefaultPositionBool = false;
        }else{//主界面
          //设置主界面图标文字
          that.zoomDefaultPositionBool = true;
        }
      });
      //鼠标移动事件--测量工具
      this.map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return;
        }
        if(that.measure!=null){
          let helpMsg = '点击开始绘制';

          if (that.sketch) {
            const geom = that.sketch.getGeometry();
            if (geom instanceof Polygon) {
              helpMsg = '点击继续绘制多边形';
            } else if (geom instanceof LineString) {
              helpMsg = '点击继续绘制折线';
            }
          }

          that.helpTooltipElement.innerHTML = helpMsg;
          that.helpTooltip.setPosition(evt.coordinate);

          that.helpTooltipElement.classList.remove('hidden');
        }
      });
      //鼠标移出事件--测量工具
      this.map.getViewport().addEventListener('mouseout', function () {
        if(that.measure!=null){
          that.helpTooltipElement.classList.add('hidden');
        }
      });
      //选择速度事件
      document.getElementById(mapStr+"-selectSpeed").onchange = function(){
        //暂停回放
        that.stopPlay();
        let num = document.getElementById(mapStr+"-selectSpeed").value;
        console.log("改变回放速率"+num);
        that.speed = num;
      }
      //选择回放类型事件
      document.getElementById(mapStr+"-selectSpeedType").onchange = function(){
        //暂停回放
        that.stopPlay();
        let num = document.getElementById(mapStr+"-selectSpeedType").value;
        console.log("改变回放类型事件"+num);
        that.speedType = num;
      }
      //地图缩放到权限位置
      this.zoomDefaultPosition();
    },
    autodivheight() {//自动获取div高度
      //获取浏览器窗口高度
      let winHeight = 0;
      if (window.innerHeight) {
        winHeight = window.innerHeight;
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
      }
      //通过深入Document内部对body进行检测，获取浏览器窗口高度
      if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
      }
      //全屏时窗口高度:864px,地图div高度:754px
      let tempHeight = 864;
      let mapTempHeight = 754;
      let mapHeight = winHeight - tempHeight + mapTempHeight;
      //最小高度
      if(mapHeight < 525){
        mapHeight = 525;
      }
      //设置地图高度
      document.getElementById(this.str+"-map").style.height= mapHeight +"px";
      console.log("窗口高度："+winHeight+"地图高度："+mapHeight);
      let top = mapHeight - 120;
      //设置回放控件高度
      document.getElementById(this.str+"-tracePlayControlDiv").style.top= top +"px";
      //resize事件--刷新地图,确保地图不变形
      if(this.map){
        this.map.updateSize();
        console.log("resize事件--刷新地图,确保地图不变形");
      }
    },
    setPopupContent(temp){//设置弹窗内容
      let html = "";
      html += "时间："+this.getTextFormat(temp.createTime);
      html += "<br/>经度："+this.getTextFormat(temp.longitude);
      html += "<br/>纬度："+this.getTextFormat(temp.latitude);
      document.getElementById(this.str+'-popup-content').innerHTML = html;
      //显示弹出窗口
      document.getElementById(this.str+"-popup").style.display="block";
    },
    getTextFormat(str){//格式化文本内容
      if(str==null || str==undefined){
        str = "";
      }
      return str;
    },
    //切换地图
    switchMap() {
      if (this.switchMapBool) {//显示街道图
        this.switchMapBool = false;
        //添加天地图图层
        if(this.layer1==null){
          this.layer1 = getTiandituVecMap();//fxpc天地图街道影像底图
          this.map.addLayer(this.layer1);
        }
        if(this.layer2==null){
          this.layer2 = getTiandituVecText();//fxpc天地图街道地图注记
          this.map.addLayer(this.layer2);
        }
        //显示街道图
        this.layer1.setVisible(true);
        this.layer2.setVisible(true);
        this.layer3.setVisible(false);
        this.layer4.setVisible(false);
        this.layer1.setZIndex(0);
        this.layer2.setZIndex(0);
      } else {//显示卫星图
        this.switchMapBool = true;
        if(this.layer3==null){
          this.layer3 = getTiandituImgMap();//fxpc天地图卫星影像底图
          this.map.addLayer(this.layer3);
        }
        if(this.layer4==null){
          this.layer4 = getTiandituImgText();//fxpc天地图卫星影像注记
          this.map.addLayer(this.layer4);
        }
        //显示卫星图
        this.layer1.setVisible(false);
        this.layer2.setVisible(false);
        this.layer3.setVisible(true);
        this.layer4.setVisible(true);
        this.layer3.setZIndex(0);
        this.layer4.setZIndex(0);
      }
    },
    //地图缩放到权限位置
    zoomDefaultPosition() {
      //刷新地图,确保地图不变形
      this.map.updateSize();
      this.map.getView().setCenter(this.center);
      this.map.getView().setZoom(this.zoom);
      //设置主界面图标文字
      this.zoomDefaultPositionBool = true;
    },
    //显示工具箱
    showHideToolsBoxDiv() {
      if (this.showHideToolsBox) {
        this.showHideToolsBox = false;
        document.getElementById(this.str+"-ToolsBoxDiv").style.display = "block";
      } else {
        this.showHideToolsBox = true;
        document.getElementById(this.str+"-ToolsBoxDiv").style.display = "none";
      }
      //关闭全部工具
      this.closeAllToolsBox(null);
    },
    //关闭全部工具
    closeAllToolsBox(type){
      //关闭测量工具
      if(type!="MeasureTool" && this.showHideMeasureTool==false){
        this.showHideMeasureTool = true;
        let divId = this.str+"-MeasureToolsDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空测量结果
        this.clearMeasure();
        this.clearMeasureBool = true;
      }
      //关闭定位工具
      if(type!="PositionTool" && this.showHidePositionTool==false){
        this.showHidePositionTool = true;
        let divId = this.str+"-MousePositionDiv";
        //隐藏
        document.getElementById(divId).style.display = "none";
        //清空定位结果
        this.clearPosition();
      }
    },
    mapLoading(msg) {//地图查询Loading
      if (this.mapLoadingBool) {
        this.$emit("mapLoading", msg);
      }
    },
    //地图工具--测试地图打印功能
    toolsBoxPrintTest() {
      let that = this;
      //测试地图导出方法一
      /*this.map.once('rendercomplete', function () {
        const mapCanvas = document.createElement('canvas');
        const size = that.map.getSize();
        mapCanvas.width = size[0];
        mapCanvas.height = size[1];
        const mapContext = mapCanvas.getContext('2d');
        Array.prototype.forEach.call(
            //document.querySelectorAll('.ol-layer canvas'),
            document.querySelectorAll('#viewTrackMap-map .ol-viewport .ol-layer canvas'),
            function (canvas) {
              if (canvas.width > 0) {
                const opacity = canvas.parentNode.style.opacity;
                mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
                const transform = canvas.style.transform;
                // Get the transform parameters from the style's transform matrix
                const matrix = transform
                    .match(/^matrix\(([^\(]*)\)$/)[1]
                    .split(',')
                    .map(Number);
                // Apply the transform to the export map context
                CanvasRenderingContext2D.prototype.setTransform.apply(
                    mapContext,
                    matrix
                );
                mapContext.drawImage(canvas, 0, 0);
              }
            }
        );
        if (navigator.msSaveBlob) {
          // link download attribute does not work on MS browsers
          navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');
        } else {
          const link = document.getElementById('image-download');
          link.crossOrigin = 'anonymous';
          link.href = mapCanvas.toDataURL();
          link.click();
        }
      });
      this.map.renderSync();*/


      //测试地图导出方法二
      /*let exportPNGElement = document.getElementById('export-png'); //导出图片功能项
      let manypng = document.getElementById('manypng'); //导出图片功能项
      if ('download' in exportPNGElement) {
        exportPNGElement.addEventListener('click', function (e) {
          that.map.once('postcompose', function (event) {debugger
            let canvas = event.context.canvas; //地图渲染容器
            exportPNGElement.href = canvas.toDataURL('image/png'); //导出图片
          });
          that.map.renderSync();
        }, false);
      } else {
        alert("浏览器不支持此导出地图图片功能！");
      }

      if ('download' in manypng) {
        manypng.addEventListener('click', function(e) {
          //  that.map.removeInteraction(draw);
          addInteraction();
          that.map.renderSync();
        },false);
      }

      let draw; // global so we can remove it later
      let source = new VectorSource();
      function addInteraction() {
        draw = new Draw({
          source: source,
          type: 'LineString',
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new Stroke({
              color: '#ffcc33',
              width: 2
            }),
            image: new Circle({
              radius: 7,
              fill: new Fill({
                color: '#ffcc33'
              })
            })
          }),
          maxPoints: 2,
          geometryFunction: createBox()//矩形框
        })

        that.map.addInteraction(draw);

        // that.map.values_.target='map2';

        function getXDis(e, number) {
          let min = undefined;
          let max = undefined;
          e.forEach(element => {
            if (min == undefined || element[number] < min) {
              min = element[number];
            }

            if (max == undefined || element[number] > max) {
              max = element[number];
            }
          });
          return [min+2, max - min-4];
        }

        let extent = [];
        draw.on('drawend',function(evt){
          let feature = evt.feature;console.log(feature);
          let ftarget = evt.target.a;
          let geometry=feature.getGeometry();
          let ext=geometry.getExtent();
          that.map.removeInteraction(draw);

          let r = that.map.getView().getResolutionForExtent(ext, that.map.getSize());//根据范围获取分辨率
          that.map.getView().setResolution(r);
          that.map.getView().setZoom(12);
          let centerone=olExtent.getCenter(ext);
          that.map.getView().setCenter(centerone);

          let canvas;
          let imageData;
          let canvas2;
          let coordinate=geometry.getCoordinates();
          that.map.once("postrender", function (e) {
            extent[0] = e.target.getPixelFromCoordinate(coordinate[0][0]);//转画布坐标
            extent[1] = e.target.getPixelFromCoordinate(coordinate[0][1]);
            extent[2] = e.target.getPixelFromCoordinate(coordinate[0][2]);
            extent[3] = e.target.getPixelFromCoordinate(coordinate[0][3]);

            let x_dx = getXDis(extent, 0);
            let y_dy = getXDis(extent, 1);

            that.map.once("postcompose", function(event) {
              canvas = event.context.canvas;
              let ctx2=canvas.getContext("2d");
              imageData = ctx2.getImageData(x_dx[0], y_dy[0], x_dx[1], y_dy[1]);
              let c=document.getElementById("viewTrackMap-map");
              c.style.width=imageData.width+'px';
              c.style.height=imageData.height+'px';
              that.map.updateSize();//容器改变重新加载地图
            });
            that.map.once('rendercomplete',function(){//渲染完成
              canvas.toBlob(function (blob) {
                saveAs(blob, 'map.png');debugger
                $('#viewTrackMap-map').css({
                  width:"100%",
                  height:"100%"
                });
                that.map.updateSize();//容器改变重新加载地图
              });
            });
          });
        });
      }*/
    },
    measureToolBox(){//测量工具Div
      let divId = this.str+"-MeasureToolsDiv";
      //关闭全部工具
      this.closeAllToolsBox("MeasureTool");
      if(this.showHideMeasureTool){
        this.showHideMeasureTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      }else{
        this.showHideMeasureTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    measureDistance(){//测距
      if(this.source!=null){
        //地图工具箱--开启测距
        this.setMapToolBox('MeasureDistance');
        //设置样式
        this.measureDistanceBool = false;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    measureArea(){//测面
      if(this.source!=null){
        //地图工具箱--开启测面
        this.setMapToolBox('MeasureArea');
        //设置样式
        this.measureAreaBool = false;
        this.measureDistanceBool = true;
        this.stopMeasureBool = true;
        this.clearMeasureBool = true;
      }
    },
    stopMeasure(){//停止测量
      if(this.source!=null){
        //地图工具箱--停止测量
        this.setMapToolBox('StopMeasure');
        //设置样式
        this.stopMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.clearMeasureBool = true;
      }
    },
    clearMeasure(){//清空测量结果
      if(this.source!=null){
        //地图工具箱--清空测量结果
        this.setMapToolBox('ClearMeasure');
        //设置样式
        this.clearMeasureBool = false;
        this.measureDistanceBool = true;
        this.measureAreaBool = true;
        this.stopMeasureBool = true;
      }
    },
    positionToolBox(){//定位工具Div
      let divId = this.str+"-MousePositionDiv";
      //关闭全部工具
      this.closeAllToolsBox("PositionTool");
      if(this.showHidePositionTool){
        this.showHidePositionTool = false;
        //显示
        document.getElementById(divId).style.display = "block";
      }else{
        this.showHidePositionTool = true;
        //隐藏
        document.getElementById(divId).style.display = "none";
      }
    },
    addPosition(){//添加定位结果
      this.clearPositionBool = true;
      this.addPositionBool = false;
      //添加定位结果
      if(this.source!=null){
        let longitude = document.getElementById(this.str+"-MousePositionLon").value;
        let latitude = document.getElementById(this.str+"-MousePositionLat").value;
        //处理经纬度
        let lonlat = this.getLonLat(longitude,latitude);
        if(lonlat!=null){
          //点
          let featureTmp = new Feature({
            geometry: new Point(lonlat)
          });
          //样式
          let style = this.getPointStyle();
          featureTmp.setStyle(style);
          //设置属性
          featureTmp.setProperties({
            type:"position",
            longitude:longitude,
            latitude:latitude,
          });
          //添加定位点
          this.source.addFeature(featureTmp);
          //居中缩放
          this.map.getView().setCenter(lonlat);
          this.map.getView().setZoom(12);
        }
      }
    },
    clearPosition(){//清空定位结果
      this.clearPositionBool = false;
      this.addPositionBool = true;
      //地图工具箱--清空
      this.setMapToolBox("Clear");
    },
    //地图工具箱
    setMapToolBox(value) {
      let that = this;
      if (value === 'Clear') {//清空
        //清空
        that.source.clear();
        //停止绘制|修改|拖拽|选择
        clearInteraction();
      } else if (value === 'Point' || value === 'LineString' || value === 'Polygon' || value === 'Circle') {//开启绘制
        //点|线|面|圆绘制
        //开启绘制
        startDrawInteraction(value, false);
      } else if (value === 'FreeHandLineString' || value === 'FreeHandPolygon') {//开启绘制
        //手绘线|手绘面
        value = value.split("FreeHand")[1];
        //开启绘制
        startDrawInteraction(value, true);
      } else if (value === 'StopDraw') {//停止绘制
        //停止绘制
        stopDrawInteraction();
      } else if (value === 'Snap') {//开启捕捉
        //开启捕捉
        startSnapInteraction();
      } else if (value === 'NotSnap') {//停止捕捉
        //停止捕捉
        stopSnapInteraction();
      } else if (value === 'Modify') {//开启修改
        //开启修改
        startModifyInteraction();
      } else if (value === 'NotModify') {//停止修改
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
      } else if (value === 'Drag') {//开启拖拽
        //开启拖拽
        startDragInteraction();
      } else if (value === 'NotDrag') {//停止拖拽
        //停止拖拽
        stopDragInteraction();
      } else if (value === 'Select') {//开启选择
        //开启选择
        startSelectInteraction();
      } else if (value === 'NotSelect') {//停止选择
        //停止选择
        stopSelectInteraction();
      } else if (value === 'MeasureDistance') {//开启测距
        //开启测距
        startMeasureInteraction('LineString');
      } else if (value === 'MeasureArea') {//开启测面
        //开启测面
        startMeasureInteraction('Polygon');
      } else if (value === 'StopMeasure') {//停止测量（测距|测面）
        //停止测量
        stopMeasureInteraction();
      } else if (value === 'ClearMeasure') {//清空测量结果
        //停止测量
        stopMeasureInteraction();
        //清空测量结果
        clearMeasureResult();
      }

      //停止绘制|修改|拖拽|选择
      function clearInteraction() {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
      }

      //停止捕捉
      function stopSnapInteraction() {
        if (that.snap) {
          that.map.removeInteraction(that.snap);
          that.snap = null;
        }
      }

      //开启捕捉
      function startSnapInteraction() {
        //停止捕捉
        stopSnapInteraction();
        //开启捕捉
        that.snap = new Snap({
          source: that.source
        });
        that.map.addInteraction(that.snap);
      }

      //停止拖拽
      function stopDragInteraction() {
        //停止拖拽
        if (that.drag) {
          that.map.removeInteraction(that.drag);
          that.drag = null;
        }
      }

      //开启拖拽
      function startDragInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止修改
        stopModifyInteraction();
        //开启选择
        startSelectInteraction();
        //停止拖拽
        stopDragInteraction();
        //开启拖拽
        that.drag = new Translate({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.drag);
      }

      //停止修改
      function stopModifyInteraction() {
        //停止修改
        if (that.modify) {
          that.map.removeInteraction(that.modify);
          that.modify = null;
        }
      }

      //开启修改
      function startModifyInteraction() {
        //停止绘制
        stopDrawInteraction();
        //开启选择
        startSelectInteraction();
        //停止修改
        stopModifyInteraction();
        //开启修改
        that.modify = new Modify({
          features: that.select.getFeatures()
        });
        that.map.addInteraction(that.modify);
      }

      //停止选择
      function stopSelectInteraction() {
        //停止选择
        if (that.select) {
          that.map.removeInteraction(that.select);
          that.select = null;
        }
      }

      //开启选择
      function startSelectInteraction() {
        //停止选择
        stopSelectInteraction();
        //开启选择
        that.select = new Select({
          wrapX: false
        });
        that.map.addInteraction(that.select);
      }

      //停止绘制
      function stopDrawInteraction() {
        //停止绘制
        if (that.draw) {
          that.map.removeInteraction(that.draw);
          that.draw = null;
        }
      }

      //开启绘制
      function startDrawInteraction(type, bool) {
        //停止拖拽
        stopDragInteraction();
        //停止修改
        stopModifyInteraction();
        //停止选择
        stopSelectInteraction();
        //停止绘制
        stopDrawInteraction();
        if (bool) {//手绘线|手绘面
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20,
            freehand: true
          });
          that.map.addInteraction(that.draw);
        } else {//点|线|面|圆绘制
          that.draw = new Draw({
            source: that.source,
            type: type,
            snapTolerance: 20
          });
          that.map.addInteraction(that.draw);
        }
      }

      //计算面积
      function getPolygonArea(polygon) {
        // 这里一定要给坐标，和地图坐标保持一致，否则面积不准
        const area = getArea(polygon, {projection: 'EPSG:4490'})
        let output = Math.round((area / 1000000) * 100) / 100;//平方公里
        return output;
      }

      ////////////////////////////////////////////////////////////////////测量工具箱
      //格式化距离
      function formatLength(line) {
        const length = getLength(line, {projection: 'EPSG:4490'});
        let output;
        if (length > 100) {
          output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
        } else {
          output = Math.round(length * 100) / 100 + ' ' + 'm';
        }
        return output;
      }

      //格式化面积
      function formatArea(polygon) {
        const area = getArea(polygon, {projection: 'EPSG:4490'});
        let output;
        if (area > 10000) {
          output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
        } else {
          output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
        }
        return output;
      }

      //创建新的提示tip
      function createHelpTooltip() {
        if (that.helpTooltipElement!=null) {
          that.helpTooltipElement.parentNode.removeChild(that.helpTooltipElement);
        }
        that.helpTooltipElement = document.createElement('div');
        that.helpTooltipElement.className = 'ol-tooltip hidden';
        that.helpTooltip = new Overlay({
          element: that.helpTooltipElement,
          offset: [15, 0],
          positioning: 'center-left',
        });
        that.map.addOverlay(that.helpTooltip);
      }

      //创建新的测量提示
      function createMeasureTooltip() {
        if (that.measureTooltipElement!=null) {
          that.measureTooltipElement.parentNode.removeChild(that.measureTooltipElement);
        }
        that.measureTooltipElement = document.createElement('div');
        that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
        that.measureTooltip = new Overlay({
          element: that.measureTooltipElement,
          offset: [0, -15],
          positioning: 'bottom-center',
          stopEvent: false,
          insertFirst: false,
        });
        that.map.addOverlay(that.measureTooltip);
      }

      //开启测量工具
      function startMeasureInteraction(type) {
        //停止测量工具
        stopMeasureInteraction();

        console.log(type);
        //开启测量工具--绘制
        that.measure = new Draw({
          source: that.measureSource,
          type: type,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: 'rgba(0, 0, 0, 0.5)',
              lineDash: [10, 10],
              width: 2,
            }),
            image: new Circle({
              radius: 5,
              stroke: new Stroke({
                color: 'rgba(0, 0, 0, 0.7)',
              }),
              fill: new Fill({
                color: 'rgba(255, 255, 255, 0.2)',
              }),
            }),
          }),
        });
        that.map.addInteraction(that.measure);

        //创建新的测量提示
        createMeasureTooltip();
        //创建新的提示tip
        createHelpTooltip();

        let listener;
        that.measure.on('drawstart', function (evt) {
          //设置sketch
          that.sketch = evt.feature;

          let tooltipCoord = evt.coordinate;

          listener = that.sketch.getGeometry().on('change', function (evt) {
            const geom = evt.target;
            let output;
            if (geom instanceof Polygon) {
              output = formatArea(geom);
              tooltipCoord = geom.getInteriorPoint().getCoordinates();
            } else if (geom instanceof LineString) {
              output = formatLength(geom);
              tooltipCoord = geom.getLastCoordinate();
            }
            that.measureTooltipElement.innerHTML = output;
            that.measureTooltip.setPosition(tooltipCoord);
          });
        });
        //完成测量绘制
        that.measure.on('drawend', function () {
          that.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
          that.measureTooltip.setOffset([0, -7]);
          //添加到数组
          that.measureTooltipArray.push(that.helpTooltip);
          //添加到数组
          that.measureTooltipArray.push(that.measureTooltip);
          //清空sketch
          that.sketch = null;
          //清空tooltip
          that.measureTooltipElement = null;
          createMeasureTooltip();
          unByKey(listener);
        });
      }

      //停止测量工具
      function stopMeasureInteraction() {
        //停止绘制
        stopDrawInteraction();
        //停止测量工具
        if (that.measure) {
          that.map.removeInteraction(that.measure);
          that.measure = null;
          //隐藏提示tip
          that.helpTooltipElement.classList.add('hidden');
          //移除测量提示
          if(that.helpTooltip!=null){
            that.map.removeOverlay(that.helpTooltip);
          }
          if(that.measureTooltip!=null){
            that.map.removeOverlay(that.measureTooltip);
          }
        }
      }

      //清空测量结果
      function clearMeasureResult(){
        if(that.measureSource!=null){
          //清空测量结果
          that.measureSource.clear();
          //清空测量结果提示数组
          if(that.measureTooltipArray.length>0){
            for(let i=0;i<that.measureTooltipArray.length;i++){
              that.map.removeOverlay(that.measureTooltipArray[i]);
            }
            that.measureTooltipArray = [];
          }
        }
      }
    },
    getPolyonStyle(color) {//多边形样式
      let style = new Style({
        fill: new Fill({//填充样式
          color: "rgba(0,0,0,0)"
        }),
        stroke: new Stroke({//描绘
          width: 2,//宽
          color: color
        })
      });

      return style;
    },
    getPointStyle(type) {//点图标样式
      let style = new Style({
        image: new Icon({
          src: dingweiImg,
          anchor: [0.5, 1]
        }),
      });
      if(type=="start"){
        style = new Style({
          image: new Icon({
            src: startImg,
            anchor: [0.5, 1]
          }),
        });
      }else if(type=="end"){
        style = new Style({
          image: new Icon({
            src: endImg,
            anchor: [0.5, 1]
          })
        });
      }else if(type=="end"){
        style = new Style({
          image: new Icon({
            src: endImg,
            anchor: [0.5, 1]
          })
        });
      }else if(type=="point"){
        style = new Style({
          image: new Circle({
            radius: 3,
            stroke: new Stroke({
              color: "rgba(0,128,0,0.5)",
              width: 2
            }),
            fill: new Fill({
              color: "rgba(0,128,0,1)"
            })
          })
        });
      }else if(type=="tempPoint"){
        style = new Style({
          image: new Circle({
            radius: 3,
            stroke: new Stroke({
              color: "rgba(192,0,0,0.5)",
              width: 2
            }),
            fill: new Fill({
              color: "rgba(192,0,0,1)"
            })
          })
        });
      }

      return style;
    },
    //处理经纬度
    getLonLat(longitude,latitude){
      let lonlat = null;
      if(longitude!=null && latitude!=null && longitude!="" && latitude!=""){
        let lon = Number(longitude);
        let lat = Number(latitude);
        if(lon>0 && lon<180 && lat>0 && lat<90){
          lonlat = [lon,lat];
        }
      }

      return lonlat;
    },
    showTraceData(){//显示全部轨迹列表
      console.log("全部轨迹列表");
      if(document.getElementById(this.str+"-tracePlayControlDiv")){
        //隐藏轨迹回放控件
        document.getElementById(this.str+"-tracePlayControlDiv").style.display = "none";
        //重置回放
        this.clearPlay();
        //清空轨迹点集（不带插值）
        this.tracePointArray = [];
        //清空全部时间数组
        this.allTimeArray = [];
      }
      //全部轨迹列表
      if(this.traceDataList!=null && this.traceDataList.length>0){
        for(let i=0;i<this.traceDataList.length;i++){
          let data = this.traceDataList[i];
          let createTime = data.createTime;
          let longitude = data.longitude;
          let latitude = data.latitude;
          if(createTime!=null && createTime!=""){
            //处理时间
            let milliseconds = new Date(createTime).getTime();
            //根据毫秒值获取时间格式
            createTime = this.getTimeFormat(milliseconds);
          }
          console.log(data);
          console.log(createTime);
          //处理经纬度
          let lonlat = this.getLonLat(longitude,latitude);
          if(lonlat!=null && createTime!=null){
            //test-start
            /*let lon = lonlat[0] + Math.random() * 10;
            let lat = lonlat[1] + Math.random() * 10;
            lonlat = [lon,lat];
            let milliseconds = new Date(createTime).getTime() + 3600000 * i;//测试增加i小时
            createTime = this.getTimeFormat(milliseconds);//根据毫秒值获取时间格式*/
            //test-end

            //经纬度
            this.tracePointArray.push(lonlat);
            //时间
            this.allTimeArray.push(createTime);
          }
        }
        console.log(this.tracePointArray);
        console.log(this.allTimeArray);
        console.log("轨迹回放初始化");
        //缩放到数据范围
        if(this.tracePointArray.length>0){
          const extent = boundingExtent(this.tracePointArray);
          this.map.getView().fit(extent, {padding: [50, 50, 50, 50]});
        }
        if(this.allTimeArray!=null && this.allTimeArray.length>0){
          this.startTime = this.allTimeArray[0];
          this.endTime = this.allTimeArray[this.allTimeArray.length-1];
          let startDate = new Date(this.startTime);
          let endDate = new Date(this.endTime);
          this.totalSeconds = (endDate.getTime() - startDate.getTime()) /1000;//回放总时长(单位：秒)
          this.currentSeconds = 0;//当前回放时长(单位：秒)
          console.log("startTime"+this.startTime+",endTime"+this.endTime+",totalSeconds:"+this.totalSeconds);
          //根据回放时长设置进度条
          this.setProgressByTime();
        }else{
          console.log("无时间");
          //隐藏轨迹回放控件
          document.getElementById(this.str+"-tracePlayControlDiv").style.display = "none";
          this.totalSeconds = 0;
          //重置回放
          this.clearPlay();
          //无时间
          return;
        }
        //轨迹回放初始化
        this.traceLineInitPlay();
      }
    },
    traceLineInitPlay(){//轨迹回放初始化
      if(this.map==null){
        return;
      }
      //没有传坐标点过来就返回
      if (this.tracePointArray.length == 0){
        return;
      }
      //清空轨迹点集（带插值）
      this.pointArray = [];
      //临时点图标样式
      this.Iconstyle = this.getPointStyle("tempPoint");
      //重置回放
      this.clearPlay();
      //显示轨迹回放控件
      document.getElementById(this.str+"-tracePlayControlDiv").style.display = "block";
    },
    //动画播放
    play() {
      let that = this;
      if(this.map==null){
        return;
      }
      if(this.tracePointArray.length==0){
        return;
      }
      //如果连续定时器没有清空，则清空定时器
      if (this.timer != null) {
        clearTimeout(this.timer);
        this.timer = null;
      }

      //判断是否播放
      if (!this.isRun) {
        return;
      }
      //回放速率
      console.log("回放速率"+this.speed);
      console.log("回放类型"+this.speedType);
      if(this.speedType==0){//按轨迹点不插值进行回放
        console.log("按轨迹点不插值进行回放");
        //定时按轨迹点进行回放
        this.playTracePointArrayInterval();
      }else{//轨迹点插值回放
        console.log("回放当前回放轨迹线段的插值点数组");
        //回放当前回放轨迹线段的插值点数组
        this.playCurrentLinePointsArray();
      }
    },
    //重新播放
    restart() {
      //如果连续定时器没有清空，则清空定时器
      if (this.timer != null) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      //清空轨迹线图层
      if (this.animationLineLayer.getSource() != null) {
        this.animationLineLayer.getSource().clear();
      }
      //清空临时轨迹线图层
      if (this.tempAnimationLineLayer.getSource() != null) {
        this.tempAnimationLineLayer.getSource().clear();
      }
      //清空轨迹点图层
      if (this.animationPointLayer.getSource() != null) {
        this.animationPointLayer.getSource().clear();
      }
      //清空临时轨迹点图层
      if (this.tempAnimationPointLayer.getSource() != null) {
        this.tempAnimationPointLayer.getSource().clear();
      }
      this.currentSeconds = 0;//当前回放时长（单位：秒）
      this.currentIndex = 0;//当前回放数据序号
      this.replayIndex = 0;
      this.isRun = true;
      //设置回放控件
      document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "暂停";
      //当前回放时长(单位：秒)
      this.currentSeconds = 0;
      //根据回放时长设置进度条
      this.setProgressByTime();
      //回放
      this.play();
    },
    //重置回放
    clearPlay() {
      if(this.map==null){
        return;
      }
      //如果连续定时器没有清空，则清空定时器
      if (this.timer != null) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      //清空轨迹线图层
      if (this.animationLineLayer.getSource() != null) {
        this.animationLineLayer.getSource().clear();
      }
      //清空临时轨迹线图层
      if (this.tempAnimationLineLayer.getSource() != null) {
        this.tempAnimationLineLayer.getSource().clear();
      }
      //清空轨迹点图层
      if (this.animationPointLayer.getSource() != null) {
        this.animationPointLayer.getSource().clear();
      }
      //清空临时轨迹点图层
      if (this.tempAnimationPointLayer.getSource() != null) {
        this.tempAnimationPointLayer.getSource().clear();
      }
      //清空轨迹点集（带插值）
      this.pointArray = [];
      this.currentSeconds = 0;//当前回放时长（单位：秒）
      this.currentIndex = 0;//当前回放数据序号
      this.replayIndex = 0;
      this.isRun = false;
      //设置回放控件
      document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "开始";
      //当前回放时长(单位：秒)
      this.currentSeconds = 0;
      //根据回放时长设置进度条
      this.setProgressByTime();
      //经纬度数组
      if(this.tracePointArray.length>0){
        //创建轨迹点
        let lonlat = this.tracePointArray[0];
        //添加轨迹点--起点
        this.addPointFeature(lonlat,0);
        //定位到轨迹范围
        let featureExtent = new Feature({
          geometry: new LineString(this.tracePointArray)
        });
        this.map.getView().fit(featureExtent.getGeometry().getExtent(), {padding: [50, 50, 50, 50]});
        //设置中心点--起点
        this.map.getView().setCenter(this.tracePointArray[0]);
      }
    },
    //回放控制
    playControl(){
      let value = document.getElementById(this.str+"-tracePlayControlButton").innerHTML;
      if(value=="开始" || value=="重播"){
        //开始回放
        this.restart();
      }else if(value=="暂停"){
        //暂停回放
        this.stopPlay();
      }else if(value=="继续"){
        //继续回放
        this.continuePlay();
      }
    },
    stopPlay(){//暂停回放
      let value = document.getElementById(this.str+"-tracePlayControlButton").innerHTML;
      if(value=="暂停"){
        document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "继续";
      }
      //暂停播放
      this.isRun = false;
      if (this.timer != null) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    },
    continuePlay(){//继续回放
      document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "暂停";
      //继续播放
      this.isRun = true;
      this.play();
    },
    //显示全部轨迹
    showAllTrace(){
      //重置回放
      this.clearPlay();
      if(this.tracePointArray!=null && this.tracePointArray.length>0){
        for(let i=0;i<this.tracePointArray.length;i++){
          if(i<(this.tracePointArray.length-1)){
            //创建轨迹线
            let line = new Feature({
              geometry: new LineString([this.tracePointArray[i], this.tracePointArray[i+1]])
            });
            //设置线的样式
            line.setStyle(this.strokestyle);
            this.animationLineLayer.getSource().addFeature(line);
          }
          //创建轨迹点
          let lonlat = this.tracePointArray[i];
          //添加轨迹点
          this.addPointFeature(lonlat,i);
        }
        //当前回放数据序号
        this.currentIndex = this.tracePointArray.length - 1;
        //当前回放时长(单位：秒)
        this.currentSeconds = this.totalSeconds;//回放总时长(单位：秒)
        //根据回放时长设置进度条
        this.setProgressByTime();
        //设置控件
        document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "重播";
        //定位到轨迹范围
        let featureExtent = new Feature({
          geometry: new LineString(this.tracePointArray)
        });
        this.map.getView().fit(featureExtent.getGeometry().getExtent(), {padding: [50, 50, 50, 50]});
      }
    },
    //根据回放时长设置进度条
    setProgressByTime(){
      //异步
      this.$nextTick(function(){
        //总时长
        let total = this.totalSeconds;
        if(total!=null && total>0){
          if (this.currentSeconds>=total) {
            this.currentSeconds = total;
          }
          //当前回放时长
          let nowTime = this.currentSeconds;
          //根据当前回放时长获取当前回放时间
          this.getCurrentTimeBySecond();
          //进度条
          let progress = document.getElementById(this.str+'-progress');
          console.log("nowTime"+nowTime+",total"+total+",progress"+progress.clientWidth);
          //获取进度条总宽度  当前回放时长/总时长 * 总宽度
          let width = nowTime / total * progress.clientWidth;
          //改变进度条的位置
          progress.children[0].style.width = width + 'px';
          progress.children[1].style.left = width + 'px';
          console.log("width" + width);
        }
      });
    },
    //根据毫秒值获取时间格式
    getTimeFormat(milliseconds){
      let time = null;
      if(milliseconds>0){
        let date = new Date(milliseconds);
        console.log(date);
        //获取时间格式yyyy-mm-dd HH:MM:SS
        let year = date.getFullYear().toString();
        let month = date.getMonth() + 1;
        if(month<10){
          month = "0"+ month.toString();
        }else{
          month = month.toString();
        }
        let day = date.getDate();
        if(day<10){
          day = "0"+ day.toString();
        }else{
          day = day.toString();
        }
        let hour = date.getHours();
        if(hour<10){
          hour = "0"+ hour.toString();
        }else{
          hour = hour.toString();
        }
        let minute = date.getMinutes();
        if(minute<10){
          minute = "0"+ minute.toString();
        }else{
          minute = minute.toString();
        }
        let second = date.getSeconds();
        if(second<10){
          second = "0"+ second.toString();
        }else{
          second = second.toString();
        }
        //格式化时间
        time = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
      }

      return time;
    },
    //根据当前回放时长获取当前回放时间
    getCurrentTimeBySecond(){
      let time = null;
      //根据开始时间和当前回放时长(单位：秒) 获取当前回放时间
      if(this.startTime!=null && this.currentSeconds!=null){
        //开始时间
        let startTime = this.startTime;
        let startDate = new Date(startTime);
        //当前回放时长
        let nowTime = this.currentSeconds;
        //当前回放时间
        let milliseconds = Math.round( startDate.getTime()+ nowTime * 1000);
        //根据毫秒值获取时间格式
        time = this.getTimeFormat(milliseconds);
        console.log(milliseconds+",time"+time);
        //当前回放时间
        this.currentTime = time;
        if(document.getElementById(this.str+'-time')){
          //当前回放时间
          document.getElementById(this.str+'-time').innerHTML = time;
          console.log("currentSeconds"+nowTime);
          console.log("currentTime"+time);
        }
      }
      return time;
    },
    //根据当前时间获取当前回放数据序号
    getCurrentIndexByTime(){
      //根据开始时间和当前回放时长(单位：秒) 获取当前回放时间
      if(this.startTime!=null && this.currentTime!=null && this.allTimeArray!=null){
        let currentTime = this.currentTime;
        let timeArray = this.allTimeArray;
        let index = null;
        for(let i=0;i<timeArray.length;i++){
          if(currentTime>=timeArray[i]){
            index = i;
          }else{
            break;
          }
        }
        //当前回放数据序号
        this.currentIndex = index;
        console.log("currentIndex"+index);
      }
    },
    //获取当前回放时长(秒)
    getCurrentSeconds(){
      if(this.startTime!=null && this.currentTime!=null){
        let startDate = new Date(this.startTime);
        let currentDate = new Date(this.currentTime);
        //当前回放时长(秒)
        this.currentSeconds = (currentDate.getTime() - startDate.getTime()) / 1000;
      }
    },
    //进度条点击事件
    progressClick(e){
      if(e.offsetX!=null){
        let progress = document.getElementById(this.str+'-progress');
        //设置进度按钮位置
        progress.children[0].style.width = e.offsetX + 'px';
        progress.children[1].style.left = e.offsetX + 'px';
        //总时长
        let total = this.totalSeconds;
        //当前回放时长
        //当前点击位置 / 进度条的总宽度 * 总时长
        this.currentSeconds = e.offsetX / progress.clientWidth * total;
        console.log("total"+total+",offsetX"+e.offsetX+",progress"+progress.clientWidth+",currentSeconds"+this.currentSeconds);
        //回放控件
        let value = document.getElementById(this.str+"-tracePlayControlButton").innerHTML;
        if(value=="暂停"){
          document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "继续";
          //暂停播放
          this.isRun = false;
          if (this.timer != null) {
            clearTimeout(this.timer);
            this.timer = null;
          }
        }else{
          document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "继续";
        }
        //绘制当前回放时间的线路
        this.drawCurrentTimeLine();
      }
    },
    //绘制当前回放时间的线路
    drawCurrentTimeLine(){
      if(this.animationLineLayer!=null && this.animationPointLayer!=null){
        this.isRun = false;
        //如果连续定时器没有清空，则清空定时器
        if (this.timer != null) {
          clearTimeout(this.timer);
          this.timer = null;
        }
        //清空轨迹线图层
        if (this.animationLineLayer.getSource() != null) {
          this.animationLineLayer.getSource().clear();
        }
        //清空临时轨迹线图层
        if (this.tempAnimationLineLayer.getSource() != null) {
          this.tempAnimationLineLayer.getSource().clear();
        }
        //清空轨迹点图层
        if (this.animationPointLayer.getSource() != null) {
          this.animationPointLayer.getSource().clear();
        }
        //清空临时轨迹点图层
        if (this.tempAnimationPointLayer.getSource() != null) {
          this.tempAnimationPointLayer.getSource().clear();
        }
        //根据当前回放时长获取当前回放时间
        this.getCurrentTimeBySecond();
        //根据当前时间获取当前回放数据序号
        this.getCurrentIndexByTime();
        //播放完成
        if (this.currentSeconds>=this.totalSeconds) {
          this.currentSeconds = this.totalSeconds;
          //设置控件
          document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "重播";
        }
        let index = this.currentIndex;
        let array = this.tracePointArray;
        if(index!=null && array!=null){
          if(array.length>=2){
            if(index>=(array.length-1)){
              index = array.length-1;
            }
            for(let i=0;i<=index;i++){
              if(i<index){
                //创建轨迹线
                let line = new Feature({
                  geometry: new LineString([array[i], array[i+1]])
                });
                //设置线的样式
                line.setStyle(this.strokestyle);
                this.animationLineLayer.getSource().addFeature(line);
                //创建轨迹点
                let lonlat = array[i];
                //添加轨迹点
                this.addPointFeature(lonlat,i);
              }else{
                if(i==0 || i==array.length-1){
                  //创建轨迹点--起点|终点
                  let lonlat = array[i];
                  //添加轨迹点
                  this.addPointFeature(lonlat,i);
                }else{
                  //创建临时轨迹点
                  let lonlat1 = array[i];
                  let time1 = this.allTimeArray[i];
                  //添加临时轨迹点
                  this.addTempPointFeature(lonlat1,time1);
                }
              }
            }
          }else if(array.length==1){//只有1条数据
            //起点
            index = 0;
            //创建轨迹点
            let lonlat = array[index];
            //添加轨迹点
            this.addPointFeature(lonlat,index);
          }
        }
      }
    },
    //获取当前回放轨迹线段的插值点数组
    getCurrentLinePointsArray(){
      //清空轨迹点集（带插值）
      this.pointArray = [];
      let pointArray = [];
      if(this.animationLineLayer!=null && this.animationPointLayer!=null){
        //当前回放时长
        let currentSeconds = this.currentSeconds;
        //回放类型
        let speedType = this.speedType;
        if(speedType=="1"){//秒
          speedType = 1;
        }else if(speedType=="2"){//分钟
          speedType = 60;
        }else if(speedType=="3"){//小时
          speedType = 3600;
        }else if(speedType=="4"){//天
          speedType = 24 * 3600;
        }
        //根据当前回放时长和速度设置当前回放时长
        this.currentSeconds = currentSeconds + speedType;
        console.log("speedType"+speedType+","+currentSeconds+","+this.currentSeconds);
        console.log("前"+this.currentTime);
        //根据当前回放时长获取当前回放时间
        this.getCurrentTimeBySecond();
        console.log("后"+this.currentTime);
        let index = this.currentIndex;
        let array = this.tracePointArray;
        if(index<(array.length-1)){
          //记录插值后的所有轨迹点，给pointArray
          let pointA = this.tracePointArray[index];
          let pointB = this.tracePointArray[index + 1];
          //时间段
          let timeA = this.allTimeArray[index];
          let timeB = this.allTimeArray[index + 1];
          let dateA = new Date(timeA);
          let dateB = new Date(timeB);
          //时间段时长(秒)
          let seconds = (dateB.getTime() - dateA.getTime()) / 1000;
          let timeCount = seconds;
          //（带插值）轨迹回放分割线段数量
          this.replayCount = timeCount;
          console.log("时间段时长分割个数"+timeCount);
          let currentDate = new Date(this.currentTime);
          console.log("this.currentTime-"+this.currentTime+","+timeA);
          //时间段时长(秒)
          let tempSeconds = (currentDate.getTime() - dateA.getTime()) / 1000;
          //已回放插值点序号
          let replayIndex = Math.floor(tempSeconds / seconds * timeCount);
          this.replayIndex = replayIndex;
          //插入临时点，每两个点之间插入count个点，不能大于回放间隔
          let count =  timeCount - 1;
          let pointA_X = pointA[0];
          let pointA_Y = pointA[1];
          let pointB_X = pointB[0];
          let pointB_Y = pointB[1];
          let disX = (pointB_X - pointA_X) / count;
          let disY = (pointB_Y - pointA_Y) / count;
          let j = replayIndex;
          let x = pointA_X + j * disX;
          let y = pointA_Y + j * disY;
          pointArray.push(pointA);
          pointArray.push([x, y]);
          console.log(timeCount+"-timeCount,replayIndex-"+replayIndex);
        }
        //轨迹点集（带插值）
        this.pointArray = pointArray;
        console.log("获取当前回放轨迹线段的插值点数组:");
        console.log(pointArray);
      }

      return pointArray;
    },
    //定时按轨迹点进行回放
    playTracePointArrayInterval(){
      let that = this;
      //暂停
      if (!this.isRun || this.currentIndex==null) {
        return;
      }
      if(this.currentIndex>0){
        //创建轨迹线
        let line = new Feature({
          geometry: new LineString([this.tracePointArray[this.currentIndex-1], this.tracePointArray[this.currentIndex]])
        });
        //设置线的样式
        line.setStyle(this.strokestyle);
        this.animationLineLayer.getSource().addFeature(line);
        if(this.currentIndex>=1){//除起点
          //创建轨迹点--前一个点
          let lonlat = this.tracePointArray[this.currentIndex-1];
          //添加轨迹点
          this.addPointFeature(lonlat,this.currentIndex-1);
        }
        if(this.currentIndex==(this.tracePointArray.length-1)){//终点
          //清空临时轨迹点
          this.tempAnimationPointLayer.getSource().clear();
          //创建轨迹点--终点
          let lonlat1 = this.tracePointArray[this.currentIndex];
          //添加轨迹点
          this.addPointFeature(lonlat1,this.currentIndex);
          //播放完成，停止定时器
          if(this.timer!=null){
            clearTimeout(this.timer);
            this.timer = null;
          }
          //设置控件
          document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "重播";
        }else{
          //创建临时轨迹点
          let lonlat1 = this.tracePointArray[this.currentIndex];
          let time1 = this.allTimeArray[this.currentIndex];
          //添加临时轨迹点
          this.addTempPointFeature(lonlat1,time1);
        }
      }else if(this.currentIndex==0){//起点
        //创建轨迹点
        let lonlat = this.tracePointArray[this.currentIndex];
        //添加轨迹点
        this.addPointFeature(lonlat,this.currentIndex);
      }
      //当前回放时间
      this.currentTime = this.allTimeArray[this.currentIndex];
      //获取当前回放时长(秒)
      this.getCurrentSeconds();
      //根据回放时长设置进度条
      this.setProgressByTime();
      //序号增加1
      this.currentIndex++;
      //播放完成，停止定时器
      if (this.currentIndex > (this.tracePointArray.length - 1)) {
        if(this.timer!=null){
          clearTimeout(this.timer);
          this.timer = null;
        }
        //设置控件
        document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "重播";
        return;
      }
      //回放间隔
      let playInterval = 1000 / this.speed;
      //播放速度
      this.timer = setTimeout(function () {
        //定时按轨迹点进行回放
        that.playTracePointArrayInterval()
      }, playInterval);
    },
    //回放当前回放轨迹线段的插值点数组
    playCurrentLinePointsArray(){
      //绘制当前回放时间的线路
      this.drawCurrentTimeLine();
      //创建轨迹点
      let lonlat = this.tracePointArray[this.currentIndex];
      //添加轨迹点
      this.addPointFeature(lonlat,this.currentIndex);
      this.isRun = true;
      //定时回放当前回放轨迹线段的插值点数组事件
      this.playCurrentLinePointsArrayInterval();
    },
    //定时回放当前回放轨迹线段的插值点数组事件
    playCurrentLinePointsArrayInterval(){
      let that = this;
      //暂停
      if (!this.isRun) {
        return;
      }
      //全部轨迹播放完成，停止定时器
      if (this.currentIndex > this.tracePointArray.length - 2) {
        //如果连续定时器没有清空，则清空定时器
        if (this.timer != null) {
          clearTimeout(this.timer);
          this.timer = null;
        }
        //设置控件
        document.getElementById(this.str+"-tracePlayControlButton").innerHTML = "重播";
        return;
      }
      //获取当前回放轨迹线段的插值点数组
      let pointArray = this.getCurrentLinePointsArray();
      console.log("this.replayIndex-"+this.replayIndex+",this.replayCount-"+this.replayCount);
      if(pointArray.length>0){
        let pointA = pointArray[0];
        let pointB = pointArray[1];
        //创建轨迹线
        let line = new Feature({
          geometry: new LineString([pointA, pointB])
        });
        //设置线的样式
        line.setStyle(this.strokestyle);
        this.animationLineLayer.getSource().addFeature(line);

        //创建临时轨迹点
        let lonlat1 = pointB;
        //当前回放时间
        let time1 = this.currentTime;
        console.log(this.replayIndex+","+lonlat1[0]+","+lonlat1[1]+","+time1);
        //添加临时轨迹点
        this.addTempPointFeature(lonlat1,time1);
      }
      //回放间隔
      let playInterval = 1000 / this.speed;
      //当前轨迹线段播放完成，停止定时器
      if (this.replayIndex > (this.replayCount - 1)) {
        //如果连续定时器没有清空，则清空定时器
        if (this.timer != null) {
          clearTimeout(this.timer);
          this.timer = null;
        }
        //当前回放数据序号增加1
        this.currentIndex++;
        //继续下一轨迹线段的插值点回放
        this.timer = setTimeout(function () {
          //根据当前回放时长获取当前回放时间
          that.getCurrentTimeBySecond();
          //根据回放时长设置进度条
          that.setProgressByTime();
          //回放当前回放轨迹线段的插值点数组
          that.playCurrentLinePointsArray();
        }, playInterval);
        return;
      }
      //播放速度
      this.timer = setTimeout(function () {
        //定时回放当前回放轨迹线段的插值点数组事件
        that.playCurrentLinePointsArrayInterval();
      }, playInterval);
    },
    //添加轨迹点
    addPointFeature(lonlat,index){
      if(lonlat!=null && index!=null){
        let time = this.allTimeArray[index];
        let type = "point";
        if(index==0){//起点
          type = "start";
        }else if(index==(this.allTimeArray.length-1)){//终点
          type = "end";
          //设置中心点--终点
          this.map.getView().setCenter(lonlat);
        }
        //点
        let featureTmp = new Feature({
          geometry: new Point(lonlat)
        });
        //样式
        let style = this.getPointStyle(type);
        featureTmp.setStyle(style);
        //设置属性
        featureTmp.setProperties({
          createTime:time,
          longitude:lonlat[0],
          latitude:lonlat[1]
        });
        //添加轨迹点
        this.animationPointLayer.getSource().addFeature(featureTmp);
      }
    },
    //添加临时轨迹点
    addTempPointFeature(lonlat,time){
      if(lonlat!=null && time!=null){
        //创建临时轨迹点
        let featureTmp = new Feature({
          geometry: new Point(lonlat)
        });
        //设置属性
        featureTmp.setProperties({
          createTime:time,
          longitude:lonlat[0],
          latitude:lonlat[1]
        });
        //样式
        featureTmp.setStyle(this.Iconstyle);
        this.tempAnimationPointLayer.getSource().clear();
        this.tempAnimationPointLayer.getSource().addFeature(featureTmp);
        //设置中心点--起点
        this.map.getView().setCenter(lonlat);
      }
    }
  }
}

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.new-menu{
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgb(23 64 100);
}
.new-play{
  width: 60px;
  height: 30px;
  border: 1px solid #fff;
  position: absolute;
  bottom: 15px;
  margin-top: -15px;
  margin-left: 20px;
  line-height: 30px;
  border-radius: 10px;
  border-color: white;
  color: white;
  cursor: pointer;
  text-align: center;
}
.new-play:hover {
  border-color: rgb(0 167 255);
  color: rgb(0 167 255);
}
.new-time{
  width: 130px;
  height: 30px;
  position: absolute;
  top: 30px;
  margin-top: -15px;
  margin-left: 90px;
  line-height: 30px;
  color: white;
  font-size: 14px;
}
.new-progress_bar{
  position: absolute;
  width: 470px;
  height: 2px;
  background-color: snow;
  left: 20px;
  top: -10px;
}
.new-progress_bar div{
  position: absolute;
  height: 2px;
  background-color: #00a7ff;
  width: 0px;
  left: 0;
  top: 0;
}
.new-progress_bar i{
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #fff;
  left: 0px;
  top: -2px;
}
.new-progress_bar:hover{
  height: 7px;
  top:-12px
}
.new-progress_bar:hover div{
  height: 7px;
  top: 0px;
}
.new-progress_bar:hover i{
  height: 11px;
  width: 11px;
  border-radius: 1px;
  top: -2px;
}
.new-speed{
  width: 70px;
  height: 30px;
  position: absolute;
  left: 230px;
  bottom: 15px;
}
.new-speed select {
  /*border: 1px solid transparent;*/
  border-radius: 0.5em;
  height: 30px;
}
.new-speedType{
  width: 70px;
  height: 30px;
  position: absolute;
  left: 290px;
  bottom: 15px;
}
.new-speedType select {
  /*border: 1px solid transparent;*/
  border-radius: 0.5em;
  height: 30px;
}

.new-clearPlay{
  position: absolute;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  right: 90px;
  bottom: 15px;
}
.new-clearPlay:hover{
  border-color: #00a7ff;
  color: #00a7ff;
}

.new-showAllTrace{
  position: absolute;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  right: 20px;
  bottom: 15px;
}
.new-showAllTrace:hover{
  border-color: #00a7ff;
  color: #00a7ff;
}

</style>